<!DOCTYPE HTML>
<html>
<head>
	<title>pixi.js example 11 RenderTexture</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #000000;
		}
	</style>

	<script src="../../bin/pixi.dev.js"></script>
</head>
<body>
	<script>

	// create an new instance of a pixi stage
	var stage = new PIXI.Stage(0x000000);

	// create a renderer instance
	var renderer = new PIXI.autoDetectRenderer(800, 600);

	// set the canvas width and height to fill the screen
	renderer.view.style.width = window.innerWidth + "px";
	renderer.view.style.height = window.innerHeight + "px";
	renderer.view.style.display = "block";

	// add render view to DOM
	document.body.appendChild(renderer.view);

	// OOH! SHINY!
	// create two render textures.. these dynamic textures will be used to draw the scene into itself
	var renderTexture = new PIXI.RenderTexture(800, 600);
	var renderTexture2 = new PIXI.RenderTexture(800, 600);
	var currentTexture = renderTexture;

	// create a new sprite that uses the render texture we created above
	var outputSprite = new PIXI.Sprite(currentTexture);

	// align the sprite
	outputSprite.position.x = 800 / 2;
	outputSprite.position.y = 600 / 2;
	outputSprite.anchor.x = 0.5;
	outputSprite.anchor.y = 0.5;

	// add to stage
	stage.addChild(outputSprite);

	var stuffContainer = new PIXI.DisplayObjectContainer();

	stuffContainer.position.x = 800 / 2;
	stuffContainer.position.y = 600 / 2

	stage.addChild(stuffContainer);

	// create an array of image ids..
	var fruits = ["spinObj_01.png", "spinObj_02.png",
					"spinObj_03.png", "spinObj_04.png",
					"spinObj_05.png", "spinObj_06.png",
					"spinObj_07.png", "spinObj_08.png"];

	// create an array of items
	var items = [];

	// now create some items and randomly position them in the stuff container
	for (var i=0; i < 20; i++)
	{
		var item = PIXI.Sprite.fromImage(fruits[i % fruits.length]);
		item.position.x = Math.random() * 400 - 200;
		item.position.y = Math.random() * 400 - 200;

		item.anchor.x = 0.5;
		item.anchor.y = 0.5;

		stuffContainer.addChild(item);

		items.push(item);
	};

	// used for spinning!
	var count = 0;

	requestAnimFrame(animate);

	function animate() {

	    requestAnimFrame( animate );

		for (var i = 0; i < items.length; i++)
		{
			// rotate each item
			var item = items[i];
			item.rotation += 0.1;
		};

		count += 0.01;

		// swap the buffers..
		var temp = renderTexture;
		renderTexture = renderTexture2;
		renderTexture2 = temp;

		// set the new texture
		outputSprite.setTexture(renderTexture);

		// twist this up!
		stuffContainer.rotation -= 0.01
		outputSprite.scale.x = outputSprite.scale.y = 1 + Math.sin(count) * 0.2;

		// render the stage to the texture
		// the true clears the texture before content is rendered
		renderTexture2.render(stage, new PIXI.Point(0,0), true);

		// and finally render the stage
	    renderer.render(stage);
	}

	</script>

	</body>
</html>
